<template>
  <view class="">
    <!-- 用户信息头部 -->
    <view class="cu-bar bg-white padding margin-top">
      <view class="avatar-box">
        <image class="cu-avatar round xl" :src="uinfo?.avatar || '/src/static/logo.png'" mode="aspectFill"
			@click="handelLogin"></image>
      </view>
      <view class="user-info flex flex-column">
        <view class="text-black text-lg font-bold">{{uinfo?.username || '未登录'}}</view>
        <view class="text-sm text-gray-500">{{uinfo?.email || '请登录'}}</view>
      </view>
      <button class="cu-btn round bg-green text-white" @click="handelSetting">
        <uni-icons type="gear" size="18" color="#fff"></uni-icons> 编辑资料
      </button>
    </view>

  </view>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import {useStore} from 'vuex'
const store = useStore()
const handelSetting = ()=>{
	uni.navigateTo({
		url:'/pages/mine/setting'
	})
}
//提取子模块数据
const uinfo = computed(()=>store.state.user.uinfo)
const handelLogin = ()=>{
	uni.navigateTo({
		url:'/pages/login/login'
	})
}
</script>

<style scoped lang="scss">
page {
  background-color: white;
  // padding-bottom: 50px;
  // min-height: calc(100vh - 412px);
}

.avatar-box {
  margin-right: 15px;
  // image{
	 //  height: 100upx;
	 //  width: 100upx;
  // }
}

.user-info {
  flex: 1;
  color: white;
  justify-content: center;
}


</style>